<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="YunDao" >

    <meta property="og:site_name" content="">
    <meta property="og:title" content="">
    <meta property="og:description" content="">
    <meta property="og:type" content="website">
    <meta property="og:image" content="">
    <meta property="og:url" content="">

    <title>登录</title>

    <link rel="stylesheet" href="/static/css-lib/bootstrap.min.css" />
    <link rel="stylesheet" href="/static/css-cus/Home.css" />
</head>
<body>

    <!-- 导航区 -->
    <header class="clearfix">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <!-- logo -->
                    <a href="#">
                        <img src="/static/images/yundao-logo-png.png" class="img-circle logo-box logo-size" alt="云道">
                    </a>
                    <span class="logo-text">YunDao</span>
                    <!-- 折叠按钮 -->
                    <button type="button" class="navbar-toggle offcanvas-toggle pull-right" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas" style="float:left;">
                        <span class="sr-only">Toggle navigation</span>
                        <span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </span>
                    </button>
                </div>
                <div class="navbar-offcanvas navbar-offcanvas-touch" id="js-bootstrap-offcanvas">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="/">首页</a>
                        </li>
                        <li>
                            <a href="#">关于我们</a>
                        </li>
                        <li>
                            <a href="#">帮助</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <!-- 内容区 -->
    <div class="container" style="margin-top: 70px">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <div class="panel panel-default">
                    <div id="panel_body" class="panel-body">
                        <div style="padding: 10px 10px 10px;">
                            <form class="bs-example bs-example-form" role="form">
                                <!-- 用户名输入 -->
                                <div class="input-group">
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-user"></span>
                                            <span>用户名</span>
                                        </span>
                                    <label for="uName"></label>
                                    <input id="uName" type="text" class="form-control" maxlength="10" placeholder="限制10个字符"/>
                                </div>
                                <br>
                                <!-- 密码输入 -->
                                <div class="input-group">
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-lock"></span>
                                            <span>密码</span>
                                        </span>
                                    <label for="uPass"></label>
                                    <input id="uPass" type="password" class="form-control" maxlength="15" placeholder="限制15个字符" autocomplete="off"/>
                                    <span class="input-group-btn">
                                        <button id="changePass" class="btn btn-default" type="button">
                                            <span id="buttonClass" class="glyphicon glyphicon-eye-close"></span>
                                        </button>
                                    </span>
                                </div>
                                <br>
                                <!-- 验证码输入 -->
                                <div class="row">
                                    <div class="col-xs-8 col-sm-9 col-md-9 col-lg-9">
                                        <div class="input-group">
                                            <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-picture"></span>
                                                <span>验证码</span>
                                            </span>
                                            <label for="uVerify"></label>
                                            <input id="uVerify" type="text" class="form-control" maxlength="4" placeholder="不限制大小写" />
                                        </div>
                                    </div>
                                    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                                        <a href="#">
                                            <img id="verifyImg" alt="验证码" src="/utils/imageAuthCode" style="border: 1px solid #ccc;"
                                                 onclick="this.src='/utils/imageAuthCode?v='+Math.random()"/>
                                        </a>
                                    </div>
                                </div>
                                <br>
                                <!-- 登录身份选择 -->
                                <div class="well well-lg">
                                    <label>选择您的登录身份</label>
                                    <div id="radioContainer">
                                        <label class="radio-inline">
                                            <input type="radio" name="roleName" value="S" checked />学生
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" name="roleName" value="T" />老师
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" name="roleName" value="P" />家长
                                        </label>
                                    </div>
                                </div>
                            </form>
                            <!-- 提示框 -->
                            <div id="errorAlert" class="alert alert-danger" style="display: none;">
                                <strong>错误！</strong><span id="error_content"></span>
                            </div>
                            <div class="row">
                                <div class="col-xs-8 col-sm-8 col-md-8 col-lg-9">
                                    <div class="checkbox">
                                        <label>
                                            <input id="uCheck" type="checkbox">七天内免登录
                                        </label>
                                    </div>
                                </div>
                                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-3">
                                    <div style="margin-top: 10px; margin-bottom: 10px;">
                                        <a href="/forgetPassword">忘记密码？</a>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <button id="submit_but" class="btn btn-primary">登录</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <div id="picture_container">
                    <img src="/static/images/user-login-bg.png" alt="YunDao" style="width: 100%; height: 100%;">
                    <div style="position: absolute; top: 20%; left: 30%; font-size: large;"></div>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/js-lib/jquery-3.4.1.min.js"></script>
    <script src="/static/js-cus/Home.js"></script>
    <script src="/static/js-cus/Login-User.js"></script>
</body>
</html>